<template>
  <my-window :title="title" :modal="modal" :wrapper-closable="true" :modal-append-to-body="modalAppendToBody"
    :visible.sync="visible" destroy-on-close size="100%" width="95%"
    drawer-body-style="padding:0px;height: calc(100% - 61px);" :before-close="onCancel">
    <my-container v-loading="pageLoading" style="display: flex; flex-direction: column;">
      <div style="flex: none ;">
        <el-form ref="header" :model="form.header" :rules="modelRules" label-width="80px" :inline="false">
          <el-row>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="入库单号" prop="orderNo">
                <el-input v-model="form.header.orderNo" readonly autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="入库日期" prop="orderDate">
                <el-date-picker v-model="form.header.orderDate" type="date" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="工单号" prop="workOrderNo">
                <el-input v-model="form.header.workOrderNo" readonly autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="生产车间" prop="workshopName">
                <el-input v-model="form.header.workshopName" readonly autocomplete="off">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--记录操作-->
        <el-form class="ad-form-query" :inline="true" @submit.native.prevent>
          <!-- <el-form-item>
          <el-button type="primary"  plain @click="onAddRow">新增</el-button>
        </el-form-item> -->
        </el-form>
      </div>
      <el-scrollbar>
        <div style="display: flex; flex: auto;">
          <el-table ref="rowTable" v-loading="listLoading" :data="form.rows" highlight-current-row height="460"
            :border="true" style="width: 100%;" @cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave">
            <el-table-column prop="row" align="center" label="行号" width="50">
              <template slot-scope="scop">
                {{scop.$index+1}}
              </template>
            </el-table-column>
            <el-table-column prop="materialCode" align="center" label="物料编码" width="160" />
            <el-table-column prop="materialName" align="center" label="物料名称" width="240" />
            <el-table-column prop="innerColor" align="center" label="内部颜色" width="240" />
            <el-table-column prop="isQualified" align="center" label="是否良品" width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.isQualified ? 'success' : 'danger'" disable-transitions>
                  {{ scope.row.isQualified ? '是' : '否' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="pcs" align="center" label="单箱数量" width="240">
              <template slot-scope="scope">
                <el-input class="item" v-model.number="scope.row.pcs" />
              </template>
            </el-table-column>
            <el-table-column prop="qty" align="center" label="数量" width="150">
              <template slot-scope="scope">
                <el-input class="item" v-model.number="scope.row.qty" />
              </template>
            </el-table-column>
            <el-table-column prop="count" align="center" label="件数" width="150">
              <template slot-scope="scope">
                <el-input class="item" v-model.number="scope.row.count" />
              </template>
            </el-table-column>
            <el-table-column prop="description" align="center" label="备注" min-width="200">
              <template slot-scope="scope">
                <el-input class="item" v-model="scope.row.description"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>

    </my-container>
    <template #footer>
      <el-button @click.native="onCancel">取消</el-button>
      <el-button type="primary" @click="onSure">确定</el-button>
    </template>
  </my-window>
</template>

<script>
  import {
    formatTime
  } from '@/utils'
  import {
    get as getWordOrder
  } from '@/api/pm/work-order'
  import {
    get,
    getList,
    add,
    update,
    softDelete,
    getListPage,
    batchSoftDelete
  } from '@/api/wm/production-receiving-order'
  import MyContainer from '@/components/my-container'
  import MyConfirmButton from '@/components/my-confirm-button'
  import MySearch from '@/components/my-search'
  import MySearchWindow from '@/components/my-search-window'
  import MyWindow from '@/components/my-window'

  export default {
    name: 'ProductionReceivingOrder',
    _sync: {
      disabled: false,
      desc: '',
      cache: true
    },
    components: {
      MyContainer,
      MyConfirmButton,
      MySearch,
      MySearchWindow,
      MyWindow
    },
    props: {
      title: {
        type: String,
        default: '生产入库单'
      },
      visible: {
        type: Boolean,
        default: false
      },
      form: {
        type: Object,
        default: ''
      },
      modal: {
        type: Boolean,
        default: false
      },
      modalAppendToBody: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        mode: 'add',
        listLoading: false,

        pageLoading: false,

        modelRules: {
          customerCode: [{
            required: true,
            message: '请输入或选择客户',
          }],
          orderDate: [{
            required: true,
            message: '请选择日期',
          }]
        },
      }
    },
    methods: {
      // 取消
      onCancel() {
        this.$emit('update:visible', false)
        this.$emit('cancel')
      },
      // 确定
      onSure() {
        if (this.form.rows.length == 0) {
          this.$message({
            message: '请增加行数据',
            type: 'error'
          })
          return
        }
        for (let i = 0; i < this.form.rows.length; i++) {
          this.form.rows[i].row = i + 1
        }
        this.$emit('click')
      },
      /** 鼠标移入cell */
      handleCellEnter(row, column, cell, event) {
        row.isEdit = true
      },
      /** 鼠标移出cell */
      handleCellLeave(row, column, cell, event) {
        row.isEdit = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-search ::v-deep .el-input-group__prepend {
    background-color: #fff;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
    margin-left: 0px;
  }
</style>
